<template>
	<!-- 时段选择组件 -->
	<view>
		<u-popup  :safeAreaInsetBottom="false" :show="visible" :round="16" mode="bottom" @close="visible=false">
			<view class="popContent">
				<view class="top">
					<text>添加时段</text>
					<view class="iconfont icon-changyong_huifu" @click="cancel">
					</view>
				</view>
				<view class="timeCon">
					<view class="left" @click="switchToStartTime">
						<text>{{ selectedTime }}</text>
					</view>
					<text class="timeSolt">至</text>
					<view class="right" @click="switchToEndTime">
						<text>{{ selectedEndTime }}</text>
					</view>
				</view>
				<view class="scrollCon">
					<!-- 开始时间选择 -->
					<template v-if="activePicker === 'start'">
						<scroll-view scroll-y="true" class="scrollItem" :scroll-top="startHourScrollTop"
							@scroll="handleStartHourScroll">
							<view v-for="(item,index) in hoursList" :key="'start-hour-'+index" class="itemDiv"
								:class="{active: startHour === index}">
								<text>{{ formatTime(item) }}</text>
								<text v-if="startHour === index">时</text>
							</view>
						</scroll-view>
						<scroll-view scroll-y="true" class="scrollItem scrollItem2" :scroll-top="startMinuteScrollTop"
							@scroll="handleStartMinuteScroll">
							<view v-for="(item,index) in minutesList" :key="'start-minute-'+index" class="itemDiv"
								:class="{active: startMinute === index}">
								<text>{{ formatTime(item) }}</text>
								<text v-if="startMinute === index">分</text>
							</view>
						</scroll-view>
					</template>
					
					<!-- 结束时间选择 -->
					<template v-else>
						<scroll-view scroll-y="true" class="scrollItem" :scroll-top="endHourScrollTop"
							@scroll="handleEndHourScroll">
							<view v-for="(item,index) in hoursList" :key="'end-hour-'+index" class="itemDiv"
								:class="{active: endHour === index}">
								<text>{{ formatTime(item) }}</text>
								<text v-if="endHour === index">时</text>
							</view>
						</scroll-view>
						<scroll-view scroll-y="true" class="scrollItem scrollItem2" :scroll-top="endMinuteScrollTop"
							@scroll="handleEndMinuteScroll">
							<view v-for="(item,index) in minutesList" :key="'end-minute-'+index" class="itemDiv"
								:class="{active: endMinute === index}">
								<text>{{ formatTime(item) }}</text>
								<text v-if="endMinute === index">分</text>
							</view>
						</scroll-view>
					</template>
				</view>
				<view class="btn">
					<view class="btn1" @click="cancel">
						<text>取消</text>
					</view>
					<view class="btn2" @click="sureSubmit">
						<text>确认</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import moment from '@/common/moment';
	export default {
		props: {
			// 是否限制时间从当前时间开始
			isLimitTime: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false,
				activePicker: 'start', // 'start' 或 'end'
				// 开始时间
				startHour: 0,
				startMinute: 0,
				startHourScrollTop: 0,
				startMinuteScrollTop: 0,
				// 结束时间
				endHour: 0,
				endMinute: 0,
				endHourScrollTop: 0,
				endMinuteScrollTop: 0,
				// 公共数据
				hoursList: [],
				minutesList: [],
				itemHeight: 88, // rpx单位，对应itemDiv的高度+margin
				selectedTime: '开始时间',
				selectedEndTime: '结束时间'
			}
		},
		watch: {
			startHour(newVal) {
				this.selectedTime = `${this.formatTime(this.startHour)}:${this.formatTime(this.startMinute)}`;
				this.checkTimeValid();
			},
			startMinute(newVal) {
				this.selectedTime = `${this.formatTime(this.startHour)}:${this.formatTime(this.startMinute)}`;
				this.checkTimeValid();
			},
			endHour(newVal) {
				this.selectedEndTime = `${this.formatTime(this.endHour)}:${this.formatTime(this.endMinute)}`;
				this.checkTimeValid();
			},
			endMinute(newVal) {
				this.selectedEndTime = `${this.formatTime(this.endHour)}:${this.formatTime(this.endMinute)}`;
				this.checkTimeValid();
			}
		},
		methods: {
			init() {
				this.visible = true;
				this.hoursList = Array.from({ length: 24 }, (_, i) => i);
				this.minutesList = Array.from({ length: 60 }, (_, i) => i);
				
				// 初始化当前时间为当前时间或00:00
				const now = new Date();
				if (this.isLimitTime) {
					this.startHour = now.getHours();
					this.startMinute = now.getMinutes();
					// 结束时间默认比开始时间晚30分钟
					let endTime = new Date(now.getTime() + 30 * 60 * 1000);
					this.endHour = endTime.getHours();
					this.endMinute = endTime.getMinutes();
				} else {
					this.startHour = 0;
					this.startMinute = 0;
					this.endHour = 0;
					this.endMinute = 30; // 默认30分钟时间段
				}
				
				// 设置初始滚动位置
				this.$nextTick(() => {
					this.startHourScrollTop = this.startHour * this.itemHeight;
					this.startMinuteScrollTop = this.startMinute * this.itemHeight;
					this.endHourScrollTop = this.endHour * this.itemHeight;
					this.endMinuteScrollTop = this.endMinute * this.itemHeight;
				});
			},
			
			// 格式化时间显示
			formatTime(time) {
				return time < 10 ? '0' + time : time;
			},
			
			// 切换到开始时间选择
			switchToStartTime() {
				this.activePicker = 'start';
			},
			
			// 切换到结束时间选择
			switchToEndTime() {
				this.activePicker = 'end';
			},
			
			// 检查时间有效性（结束时间不能早于开始时间）
			checkTimeValid() {
				if (this.startHour > this.endHour || 
					(this.startHour === this.endHour && this.startMinute >= this.endMinute)) {
					// 结束时间自动调整为开始时间+30分钟
					let totalMinutes = this.startHour * 60 + this.startMinute + 30;
					this.endHour = Math.floor(totalMinutes / 60) % 24;
					this.endMinute = totalMinutes % 60;
					
					this.$nextTick(() => {
						this.endHourScrollTop = this.endHour * this.itemHeight;
						this.endMinuteScrollTop = this.endMinute * this.itemHeight;
					});
				}
			},
			
			// 处理开始时间-小时滚动
			handleStartHourScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.startHour = Math.min(
					Math.max(0, Math.round(scrollTop / this.itemHeight)),
					this.hoursList.length - 1
				);
				this.startHourScrollTop = this.startHour * this.itemHeight;
			},
			
			// 处理开始时间-分钟滚动
			handleStartMinuteScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.startMinute = Math.min(
					Math.max(0, Math.round(scrollTop / this.itemHeight)),
					this.minutesList.length - 1
				);
				this.startMinuteScrollTop = this.startMinute * this.itemHeight;
			},
			
			// 处理结束时间-小时滚动
			handleEndHourScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.endHour = Math.min(
					Math.max(0, Math.round(scrollTop / this.itemHeight)),
					this.hoursList.length - 1
				);
				this.endHourScrollTop = this.endHour * this.itemHeight;
			},
			
			// 处理结束时间-分钟滚动
			handleEndMinuteScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.endMinute = Math.min(
					Math.max(0, Math.round(scrollTop / this.itemHeight)),
					this.minutesList.length - 1
				);
				this.endMinuteScrollTop = this.endMinute * this.itemHeight;
			},
			
			sureSubmit() {
				const result = {
					start: {
						hour: this.startHour,
						minute: this.startMinute,
						formatted: this.selectedTime
					},
					end: {
						hour: this.endHour,
						minute: this.endMinute,
						formatted: this.selectedEndTime
					}
				};
				this.$emit('sureDate', result);
				this.visible = false;
			},
			
			cancel() {
				this.visible = false;
				this.$emit('cancel');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popContent {
		position: relative;
		padding: 40rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.iconfont {
				color: rgba(153, 153, 153, 1);
				font-size: 32rpx;
			}
		}

		.timeCon {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left, .right {
				width: 300rpx;
				height: 64rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
			}
			
			.left {
				background: rgba(242, 255, 252, 1);
				border: 2rpx solid $theme-color;
				color: $theme-color;
			}
			
			.timeSolt {
				margin: 0 16rpx;
				font-size: 28rpx;
			}

			.right {
				background: rgba(246, 248, 252, 1);
				border: 2rpx solid rgba(235, 235, 235, 1);
				color: rgba(152, 160, 166, 1);
				
				&.active {
					background: rgba(242, 255, 252, 1);
					border: 2rpx solid $theme-color;
					color: $theme-color;
				}
			}
		}

		.scrollCon {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 88rpx 0 48rpx 0;

			.scrollItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 208rpx;
				width: 70rpx;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 46rpx;
				overflow: hidden;

				.itemDiv {
					display: flex;
					justify-content: center;
					height: 48rpx;
					margin: 20rpx 0;
					color: #999;
					transition: all 0.2s;

					&.active {
						color: #44D4A8;
						font-weight: bold;
						font-size: 36rpx;
					}
				}
			}

			.scrollItem2 {
				margin-left: 158rpx;
			}
		}

		.btn {
			display: flex;
			align-items: center;

			.btn1 {
				width: 331rpx;
				border-radius: 24rpx;
				background: rgba(246, 248, 252, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 24rpx 0;
				font-size: 28rpx;
				color: rgba(94, 103, 110, 1);
			}

			.btn2 {
				@extend .btn1;
				background: $theme-color;
				color: #fff;
				margin-left: 24rpx;
			}
		}
	}
</style>